<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header" ref="headerDom">
        <h1 class="logo">知识星球 - 后台管理系统</h1>
        <div class="header-right">
          <el-avatar :size="40">
            <img
              src="../assets/touxiang.jpg"
            />
          </el-avatar>
          <div class="name">
            你好，吴炽彪！
          </div>
          <el-button type="danger" @click="logout">退出登录</el-button>
        </div>
      </el-header>
      <el-container :style="`height:${conHeght}px;`">
        <el-aside :width="isCollapse?'64px':'260px'">
          <div style="padding: 10px;">
            <h1 style="text-align: center;font-size: 22px;">—— 知识星球 ——</h1>
          </div>
          <el-menu
            :collapse="isCollapse"
            :collapse-transition="false"
            :router = true
          >
            <el-menu-item :index="item.route_name" v-for="(item,index) in menuList" :key="index">
              <img :src="`http://127.0.0.1:7001/public/icon/${item.icon}`" style="width: 25px;height: 25px;margin-right: 5px;" alt="">
              <template #title>{{item.title}}</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="background-color:#f2f2f2;">
          <div class="nav">
            <div class="nav-icon">
              <el-icon :size="25" @click = "handleTab()"><Fold /></el-icon>
              <el-icon :size="25"><House /></el-icon>
            </div>
          </div>
          <div class="main-card" :style="`height:${cardHeight}px;`">
            <el-card shadow="always">
              <RouterView />
            </el-card>
          </div>


        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import router from '@/router'
import { defineComponent,ref,onMounted,reactive,toRefs} from 'vue'
import { getCurrentInstance} from 'vue'
import { useStore } from '../store'

export default defineComponent({
  name: 'Index',
  components: {

  },
  setup(){
    const store = useStore()

    // 主体容器高度
    const context = getCurrentInstance()?.appContext.config.globalProperties; //获取this
    const conHeght = ref(0)
    conHeght.value = context?.$utils.getClientHeight() - 60;

    // 收缩菜单栏
    const isCollapse = ref(false)
    const handleTab = ()=>{
      isCollapse.value = !isCollapse.value
    }

    // 获取菜单列表
    const reactiveData = reactive({menuList:[]})
    const getMenuList = ()=>{
      (reactiveData.menuList as any[]) = store.state.userModule.menuTree
    }

    // 主体卡片容器高度
    const cardHeight = ref(0);
    cardHeight.value = context?.$utils.getClientHeight() - 100

    // 退出登录
    const logout = ()=>{
      store.dispatch('userModule/logout')
      router.push('/login')
    }

    onMounted(() => {
      getMenuList()
      store.commit('setCardHeight',cardHeight.value)
    })



    return {conHeght,handleTab,isCollapse,getMenuList,...toRefs(reactiveData),cardHeight,logout}
  }
})
</script>

<style scoped lang="stylus">
.header{
  display:flex;justify-content: space-between;align-items: center; background-color:  #337ecc;
   &-menu{
    flex:1
   }
   &-right{
      display:flex;
      justify-content:space-between;
      align-items:center;
       .name{
        margin-left :10px;
       }
   }
}

.nav{
  height:40px;
  background:#fff;
  box-shadow: 0px 5px 5px #dbdbdb;
  display:flex;
  align-items:center;
  padding:0 10px;
   &-icon{
    display:flex;
    align-items:center;
     /deep/ .el-icon{
      margin:0 5px;
      cursor:pointer;
     }
   }
}

.main-card{
  box-sizing:border-box;
  padding:10px;
   /deep/ .el-card{
    height:100%;
   }
}

/deep/ .el-main{
  --el-main-padding:0px;
  border-left:1px #f2f2f2 solid;
}
/deep/ .el-menu{
  border:0;
}

</style>
